<template>
  <div>
    <div class="page-header">
      <div class="box">
        <el-row class="left">
          <el-row class="title">
            <span></span>
            查看报备详情
          </el-row>
        </el-row>
        <el-row class="right">
          <el-button type="primary" class="tlwok-btn" @click="reloadPage">
            <span class="el-icon-refresh el-icon--left"></span>刷新
          </el-button>
          <el-button type="danger" class="tlwok-btn" @click="closePage">
            <span class="el-icon-close el-icon--left"></span>关闭
          </el-button>
        </el-row>
      </div>
    </div>
    <div class="page-content">
      <div class="table-box">
        <div class="table-title">
          <el-row class="left">
            <span class="title">报备编号：{{id}}</span>
            <span class="warning-text">
              <i class="el-icon-warning"></i>
              报备状态：{{basicInfo.filingStateName}}
            </span>
          </el-row>
        </div>
        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              报备基础信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <el-row>
                <el-col :span="8">
                  <label>项目名称：</label>{{basicInfo.purchasePlatformName}}
                </el-col>
                <el-col :span="16">
                  <label>创建时间：</label>{{basicInfo.createTime | dateFilter}}
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              报备商品信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <el-row>
                <el-col :span="24">
                  <label>商品名称：</label>{{basicInfo.goodsName}}
                </el-col>

                <el-col :span="8">
                  <label>sku商品编码：</label>{{basicInfo.skuId || '-'}}
                </el-col>
                <el-col :span="8">
                  <label>商品类目：</label>{{basicInfo.categoryName}}
                </el-col>
                <el-col :span="8">
                  <label>商品品牌：</label>{{basicInfo.brandName}}
                </el-col>

                <el-col :span="8">
                  <label>型号：</label>{{basicInfo.model}}
                </el-col>
                <el-col :span="8">
                  <label>数量：</label>{{basicInfo.num}}
                </el-col>
                <el-col :span="8">
                  <label>单位：</label>{{basicInfo.unit}}
                </el-col>

                <el-col :span="8">
                  <label>重量：</label>{{basicInfo.weight}}kg
                </el-col>
                <el-col :span="8">
                  <label>挂网价：</label>{{basicInfo.salesPrice}}
                </el-col>
                <el-col :span="8">
                  <label>商品条码：</label>{{basicInfo.itemBarcode}}
                </el-col>

                <el-col :span="8">
                  <label>参数规格：</label>{{basicInfo.spec || '-'}}
                </el-col>
                <el-col :span="8">
                  <label>包装清单：</label>{{basicInfo.packingList || '-'}}
                </el-col>
                <el-col :span="8">
                  <label>外包装尺寸：</label>{{basicInfo.packageSize}}mm
                </el-col>

                <el-col :span="24">
                  <label>备注：</label>{{basicInfo.remark || '-'}}
                </el-col>

                <el-col :span="24">
                  <label>参考链接：</label>{{basicInfo.refLink || '-'}}
                </el-col>

                <el-col :span="24">
                  <label>商品图片：</label>
                  <el-image
                    style="width: 100px;height: 100px; margin-right: 10px;background: #ddd"
                    v-for="(img, index) in basicInfo.refImgs"
                    :key="index"
                    :src="img"
                    :preview-src-list="basicInfo.refImgs"
                    fit="contain"
                  />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              商品上架信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <el-row>
                <el-col :span="8">
                  <label>SKU商品编码：</label>{{basicInfo.skuId || '-'}}
                </el-col>
                <el-col :span="16" style="display: flex">
                  <label>上传链接：</label>
                  <div style="flex: 1; min-width: 0; line-height: 1.4;">{{basicInfo.refOnlineLink || '-'}}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
import { detail } from '@/api/goodsReport'
import dict from '@/lib/dict'
const { goodsStatusList } = dict

export default {
  name: 'FilingDetail',
  data () {
    return {
      id: null,
      basicInfo: {},
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    code2name (code, list) {
      for (const item of list) {
        if (item.code == code) {
          return item.desc
        }
      }
    },
    async getData () {
      const loading = this.$loading()
      this.basicInfo = await detail(this.id)
      this.$set(this.basicInfo, 'filingStateName', this.code2name(this.basicInfo.filingState, goodsStatusList))
      if (this.basicInfo.refImgs) {
        try {
          this.basicInfo.refImgs = JSON.parse(this.basicInfo.refImgs)
        } catch (error) {

        }
      }
      if (!Array.isArray(this.basicInfo.refImgs)) {
        this.basicInfo.refImgs = []
      }
      console.log('this.detail', this.basicInfo)
      loading.close()
    },
    reloadPage () {
      // location.reload()
      this.getData()
    },
    closePage () {
      if (this.type == 1) {
        let path = ''
        if (this.fromOSS) path = 'OSSFilings'
        else path = '/customer/order'
        this.$router.push({ path: path })
      } else {
        window.close()
      }
    },
  },
}
</script>

<style lang="less" scoped>
@themeColor:#298DF8;
.page-header {
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .box {
    margin: auto;
    max-width: 1440px;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    span {
      width: 0;
      height: 20px;
      border: 2px solid @themeColor;
      background: @themeColor;
      margin-right: 14px;
    }
  }
}
.page-content {
  background: #fff;
  padding-top: 65px;
}
.info-box {
  margin: 30px auto;
  width: 60%;
}
.table-box,
.btn-box {
  width: 1078px;
  margin: 20px auto;
}
.table-title {
  border: 1px solid #bbb;
  padding: 0 25px;
  height: 45px;
  display: flex;
  align-items: center;
  background: #e4e4e4;
  justify-content: space-between;
  .left {
    display: flex;
  }
  .title {
    font-weight: bold;
    margin-right: 50px;
  }
}
.info-item {
  border: 1px solid #bbb;
  border-top: 0;
  .thead {
    background: #f5f5f5;
    padding: 0 25px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    .info {
      margin-right: 100px;
    }
  }
}
.base-info {
  .tbody {
    border-top: 1px solid #bbb;
    padding: 25px;
  }
  .content {
    width: 85%;
    margin: 0 auto;
  }
  .line-item {
    display: flex;
    align-items: flex-start;
    .el-row {
      flex: 1;
      margin-bottom: 12px;
      line-height: 28px;
      &:first-child {
        margin-right: 50px;
      }
    }
  }
}
.btn-box {
  text-align: right;
  .el-button {
    width: 98px;
  }
}
.dialog-form {
  .el-input {
    width: 250px;
    margin: auto;
  }
  .warning-text {
    margin-left: 10px;
    font-size: 13px;
  }
}

.base-info .el-col {
  // line-height: 2.5;
  margin-bottom: 30px;
  label {
    width: 120px;
    display: inline-block;
    text-align: right;
    color: #666;
  }
}
</style>
